<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="grid.css" />
<style type="text/css">
	.defrow{border: 1px solid #F5C6C6;margin: 10px;padding: 10px;margin-bottom: 5px;text-align: center;clear:both;*zoom:1;overflow:hidden;}
	.defrow div{border: 0px solid #BC5050;background-color: #F5C6C6;float: left;display: block;margin: 0px;line-height: 30px;}
	.defrow div:hover{background-color:#E8B4B4; }
	.clear{clear:both;}
</style> 
</head>
<body style="padding: 50px;font: 12px '微软雅黑'">
	<div ><h1>栅格化布局</h1></div>
	<div class="defrow" >
		<div class="g-1-3">1/3</div>
		<div class="g-2-3">2/3</div>
	</div>
	<div class="defrow" style="padding:10px 100px">
		<div class="g-1-24">1/24</div>
		<div class="g-1-12">1/12</div>
		<div class="g-1-8">1/8</div>
		<div class="g-1-4">1/4</div>
		<div class="g-1-2">1/2</div>
	</div>
	<div class="defrow">
		<div class="g-1-2">1/2</div>
		<div class="g-1-2">1/2</div>
	</div>
	<div class="defrow">
		<div class="g-1-3">1/3</div>
		<div class="g-1-3">1/3</div>
		<div class="g-1-3">1/3</div>
	</div>
	<div class="defrow">
		<div class="g-1-4">1/4</div>
		<div class="g-1-4">1/4</div>
		<div class="g-1-4">1/4</div>
		<div class="g-1-4">1/4</div>
	</div>
	<div class="defrow">
		<div class="g-1-5">1/5</div>
		<div class="g-1-5">1/5</div>
		<div class="g-1-5">1/5</div>
		<div class="g-1-5">1/5</div>
		<div class="g-1-5">1/5</div>
	</div>
	<div class="defrow">
		<div class="g-1-6">1/6</div>
		<div class="g-1-6">1/6</div>
		<div class="g-1-6">1/6</div>
		<div class="g-1-6">1/6</div>
		<div class="g-1-6">1/6</div>
		<div class="g-1-6">1/6</div>
		
	</div>
	
	<div class="defrow">
		<div class="g-1-8">1/8</div>
		<div class="g-1-8">1/8</div>
		<div class="g-1-8">1/8</div>
		<div class="g-1-8">1/8</div>
		<div class="g-1-8">1/8</div>
		<div class="g-1-8">1/8</div>
		<div class="g-1-8">1/8</div>
		<div class="g-1-8">1/8</div>
		
	</div>
	
	<div class="defrow">
		<div class="g-1-12">1/12</div>
		<div class="g-1-12">1/12</div>
		<div class="g-1-12">1/12</div>
		<div class="g-1-12">1/12</div>
		<div class="g-1-12">1/12</div>
		<div class="g-1-12">1/12</div>
		<div class="g-1-12">1/12</div>
		<div class="g-1-12">1/12</div>
		<div class="g-1-12">1/12</div>
		<div class="g-1-12">1/12</div>
		<div class="g-1-12">1/12</div>
		<div class="g-1-12">1/12</div>
		
	</div>
	
	<div class="defrow">
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		<div class="g-1-24">1/24</div>
		
	</div>
	<div class="defrow"> <div class="g-1-24">1/24</div>  </div>
	<div class="defrow"> <div class="g-2-24">2/24</div>  </div>
	<div class="defrow"> <div class="g-3-24">3/24</div>  </div>
	<div class="defrow"> <div class="g-4-24">4/24</div>  </div>
	<div class="defrow"> <div class="g-5-24">5/24</div>  </div>
	<div class="defrow"> <div class="g-6-24">6/24</div>  </div>
	<div class="defrow"> <div class="g-7-24">7/24</div>  </div>
	<div class="defrow"> <div class="g-8-24">8/24</div>  </div>
	<div class="defrow"> <div class="g-9-24">9/24</div>  </div>
	<div class="defrow"> <div class="g-10-24">10/24</div>  </div>
	<div class="defrow"> <div class="g-11-24">11/24</div>  </div>
	<div class="defrow"> <div class="g-12-24">12/24</div>  </div>
	<div class="defrow"> <div class="g-13-24">13/24</div>  </div>
	<div class="defrow"> <div class="g-14-24">14/24</div>  </div>
	<div class="defrow"> <div class="g-15-24">15/24</div>  </div>
	<div class="defrow"> <div class="g-16-24">16/24</div>  </div>
	<div class="defrow"> <div class="g-17-24">17/24</div>  </div>
	<div class="defrow"> <div class="g-18-24">18/24</div>  </div>
	<div class="defrow"> <div class="g-19-24">19/24</div>  </div>
	<div class="defrow"> <div class="g-20-24">20/24</div>  </div>
	<div class="defrow"> <div class="g-21-24">21/24</div>  </div>
	<div class="defrow"> <div class="g-22-24">22/24</div>  </div>
	<div class="defrow"> <div class="g-23-24">23/24</div>  </div>
	<div class="defrow"> <div class="g-24-24">24/24</div>  </div>
	
</body>
</html>